<template>
	<div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
		<div class="bim-drawer-mask"></div>
		<div class="bim-drawer-left">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="people-manage">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">现场情况</h3>
									</div>
									<div class="worksite">
										<div class="chart-container" v-show="totalShow">
											<div id="pie-chart" ref="chartDiv" style="width: 475px;height: 280px;"></div>
											<div id="pie-chart2" ref="chartDiv1" style="width: 475px;height: 280px;"></div>
										</div>
										<div style="width: 100%;height:560px;display:flex;justify-content:center;align-items:center;color:#a7c7e1;font-size:20px" v-show="!totalShow">暂无数据</div>
									</div>
									<div class="line-block-placeholder"></div>
									<div class="contact">
										<div class="contact-title">负责人联系方式</div>
										<div class="contact-list">
											<div class="contact-list-item">
												<div class="contact-list-item__name">
													<span>李大维</span>
												</div>
												<div class="contact-list-item__type">
													<span>电工</span>
												</div>
												<div class="contact-list-item__phone">
													<span>156XXXXXXXX</span>
												</div>
											</div>
											<div class="contact-list-item">
												<div class="contact-list-item__name">
													<span>李大维</span>
												</div>
												<div class="contact-list-item__type">
													<span>电工</span>
												</div>
												<div class="contact-list-item__phone">
													<span>156XXXXXXXX</span>
												</div>
											</div>
											<div class="contact-list-item">
												<div class="contact-list-item__name">
													<span>李大维</span>
												</div>
												<div class="contact-list-item__type">
													<span>电工</span>
												</div>
												<div class="contact-list-item__phone">
													<span>156XXXXXXXX</span>
												</div>
											</div>
											<div class="contact-list-item">
												<div class="contact-list-item__name">
													<span>李大维</span>
												</div>
												<div class="contact-list-item__type">
													<span>电工</span>
												</div>
												<div class="contact-list-item__phone">
													<span>156XXXXXXXX</span>
												</div>
											</div>
											<div class="contact-list-item">
												<div class="contact-list-item__name">
													<span>李大维</span>
												</div>
												<div class="contact-list-item__type">
													<span>电工</span>
												</div>
												<div class="contact-list-item__phone">
													<span>156XXXXXXXX</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bim-drawer-right">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="people-manage">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">人员管理</h3>
									</div>
									<div class="list-block">
										<div class="new-feed-tips" v-show="false">
											<a href="javascript:void(0);">有新消息，点击查看</a>
										</div>
										<transition-group
												name="bim-notification-fade"
												tag="div"
												v-bind:css="false"
												v-on:before-enter="beforeEnter"
												v-on:enter="enter"
												v-on:leave="leave"
												v-loading="listLoading"
												style="height: 768px;">
											<div
													class="list-item"
													v-for="(item, index) in list"
													:key="item.id"
													:class="item.state === 'in' ? 'entry' : 'exit'"
													:data-index="index">
												<div class="list-item__profile">
													<img :src="item.logo">
												</div>
												<div class="list-item__name" :title="item.user_name">
													<span>{{ item.user_name }}</span>
												</div>
												<div class="list-item__type" :title="item.job_type">
													<span>{{ item.job_type }}</span>
												</div>
												<div class="list-item__time">
													<span>{{ item.created_at }}</span>
												</div>
												<div class="list-item__status">
													<span>{{ item.state === 'in' ? '进入' : '出场' }}</span>
												</div>
											</div>
										</transition-group>
										<el-pagination
												v-show="total>0"
												background
												layout="prev, pager, next"
												@current-change="handleCurrentChange"
												:page-size="15"
												:total="total"
												prev-text="上一页"
												next-text="下一页"
												:hide-on-single-page=true
												class="bim-pager">
										</el-pagination>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Velocity from 'velocity-animate'
import echarts from 'echarts'

export default {
	data() {
		return {
			list: null,
			total: 0,
			visible: false,
			interval: null,
			listLoading: true,
			pieChartOrder: null,
			pieChartOrder1: null,
			totalShow: false,
			chartTodayData: [],
			todayLegend: false,
			groupLegend: false,
			chartGroupData: []
		}
	},
	created() {
		const _self = this
		_self.interval = setInterval(() => {
			if (!_self.visible) {
				_self.visible = true
			}
			clearInterval(_self.interval)
		})

		_self.getComputedCount()
		_self.getDataList()
		_self.socketInit()
	},
	mounted() {
		this.drawPieChart()
	},
	beforeDestroy() {
		if (this.interval) {
			clearInterval(this.interval)
		}
	},
	methods: {
		getComputedCount () {
			var self = this
			self.$http.get('/api/in_out_count').then(res => {
				const result = res.data.data.tongji
				const today = result.today
				const group = result.group
				let data = []
				let temp = {}
				if (today && (today.in || today.out)) {
					if (today.in) {
						temp = {}
						temp.name = '进入工地人数'
						temp.value = today.in
						data.push(temp)
					}
					if (today.out) {
						temp = {}
						temp.name = '工地出场人数'
						temp.value = today.out
						data.push(temp)
					}
					self.todayLegend = true
					self.chartTodayData = data
				}
				if (group) {
					data = []
					for (var key in group) {
						temp = {}
						temp.value = group[key].count
						temp.name = key
						data.push(temp)
					}
					self.groupLegend = true
					self.chartGroupData = data
				}
				if (today && (today.in || today.out) || group) {
					self.totalShow = true
					self.drawPieChart()
				}
			})
		},
		getDataList (page = 1) {
			this.listLoading = true
			this.$http.get('/api/door/inout', {params: {page: page}}).then(response => {
				this.list = response.data.data
				this.total = response.data.total_pages
				this.listLoading = false
			})
		},
		handleCurrentChange (e) {
			this.getDataList(e)
		},
		socketInit () {
			let ws = new WebSocket(this.$wsUrl)
			var _self = this
			ws.onmessage = evt => {
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				clearInterval(_self.interval)
				switch (res.module) {
					case 'door':
						if (res.type === 'info') {
							this.totalShow = true
							var data = []
							var result = res.data.tongji
							var today = result.today
							var temp = {}
							if (today.in) {
								temp = {}
								temp.name = '进入工地人数'
								temp.value = today.in
								data.push(temp)
							}
							if (today.out) {
								temp = {}
								temp.name = '工地出场人数'
								temp.value = today.out
								data.push(temp)
							}
							this.pieChartOrder.setOption({
								legend: {
									show: true
								},
								series: [
									{
										data: data
									}
								]
							})

							var group = result.group
							data = []
							for (var key in group) {
								temp = {}
								temp.value = group[key].count
								temp.name = key
								data.push(temp)
							}
							this.pieChartOrder1.setOption({
								legend: {
									show: true
								},
								series: [
									{
										data: data
									}
								]
							})
						}
						break
					default:
						break
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		drawPieChart () {
			const self = this
			const chartDiv = self.$refs.chartDiv
			const chartDiv1 = self.$refs.chartDiv1
			self.pieChartOrder = echarts.init(chartDiv)
			self.pieChartOrder1 = echarts.init(chartDiv1)

			self.pieChartOrder.setOption({
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)',
					backgroundColor: 'rgba(50, 50, 50, 0.7)'
				},
				legend: {
					orient: 'vertical',
					left: 350,
					top: 'middle',
					show: self.totalShow,
					itemGap: 20,
					textStyle: {
						color: '#CDE9FF',
						fontSize: 14
					}
				},
				series: [
					{
						name: '工地进出人数统计',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 18,
								color: '#CDE9FF'
							}
						},
						labelLine: {
							show: false
						},
						data: self.chartTodayData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								color: function (params) {
									var colorList = [
										'#02AF7D', '#3753FF', '#9741FF'
									]
									return colorList[params.dataIndex]
								}
							}
						}
					}
				]
			})
			self.pieChartOrder1.setOption({
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)',
					backgroundColor: 'rgba(50,50,50,0.7)'
				},
				legend: {
					orient: 'vertical',
					left: 350,
					top: 'middle',
					show: self.totalShow,
					itemGap: 20,
					textStyle: {
						color: '#CDE9FF',
						fontSize: 14
					}
				},
				series: [
					{
						name: '工种人数统计',
						type: 'pie',
						radius: ['50%', '70%'],
						label: {
							formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
							backgroundColor: '#eee',
							borderColor: '#aaa',
							borderWidth: 1,
							borderRadius: 4,
							rich: {
								a: {
									color: '#999',
									lineHeight: 22,
									align: 'center'
								},
								hr: {
									borderColor: '#aaa',
									width: '100%',
									borderWidth: 0.5,
									height: 0
								},
								b: {
									fontSize: 16,
									lineHeight: 33
								},
								per: {
									color: '#eee',
									backgroundColor: '#334455',
									padding: [2, 4],
									borderRadius: 2
								}
							},
							show: false
						},
						data: self.chartGroupData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								color: function (params) {
									var colorList = [
										'#6D4CFF', '#4C3DF8', '#0E43F7', '#0984F3', '#39CEF9', '#14F5C4'
									]
									return colorList[params.dataIndex]
								}
							}
						}
					}
				]
			})
		},
		beforeEnter: function (el) {
			el.style.opacity = 0
			el.style.height = 0
		},
		enter: function (el, done) {
			const delay = el.dataset.index * 150
			setTimeout(function () {
				Velocity(
						el,
						{opacity: 1, height: '40px'},
						{complete: done}
				)
			}, delay)
		},
		leave: function (el, done) {
			Velocity(
					el,
					{opacity: 0, height: 0},
					{complete: done}
			)
		}
	}
}
</script>

<style lang="scss" scoped>
.new-feed-tips {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: -30px 0 0;
	padding: 3px 20px;
	background-color: rgba($color: #45678a, $alpha: 0.4);
	font-size: 12px;
	border-radius: 0 0 5px 5px;

	a {
		color: #93c0e3;
	}
}

.contact {
	&-title {
		color: #cde9ff;
		font-size: 30px;
		padding: 20px 0;
	}

	&-list {
		&-item {
			display: flex;
			height: 40px;
			color: #cde9ff;
			font-size: 18px;
			align-items: center;
			justify-content: space-around;
			background-color: rgba(#45678A, .4);

			&:nth-child(2n) {
				background-color: rgba(#45678A, .2);
			}
		}
	}
}
</style>
